<template>
	<view>

		<view v-if="vehicleData.length > 0">

			<view class="item" v-for="(item, index) in vehicleData" :key="index" @click="itemClick(item)">

				<view class="title">

					<text class="title-left">
						订单编号:{{filterNull(item.orderCarCode)}}
					</text>

					<text class="title-right">
						{{item.flowStatusShow}}
					</text>
				</view>

				<text
					style="font-weight: bold;font-size: 28upx;margin: 0 0 20upx 20upx;">{{filterNull(item.carNo)}}</text>

				<view class="text-line">
					<text class="text-name">品牌/车系/车型:</text>
					<text class="text-value">{{filterNull(item.brandSeriesModelName)}}</text>
				</view>

				<view v-if="item.myCarBusinessList.length > 0">
					<u-line color="#efefef" margin="5px 0 15px"></u-line>



					<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon> -->
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(childItem, childIndex) in item.myCarBusinessList"
							:key="childItem.businessType">

							<text class="grid-title">{{childItem.prompt}}</text>
							<text class="grid-value">{{childItem.businessName}}</text>
						</u-grid-item>
					</u-grid>

				</view>

			</view>

			<u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
		</view>

		<no-data v-else></no-data>

	</view>
</template>

<script>
	import {
		carlist
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				loadingStatus: 'loading',
				vehicleData: []
			}
		},

		onLoad() {
			this.getData()
		},

		methods: {

			getData() {
				carlist({
					params: {
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				}).then(res => {
					if (this.pageNo == 1) {
						this.vehicleData = [];
						this.pageNo++;
						// uni.stopPullDownRefresh();

						this.loadingStatus = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNo++;

							this.loadingStatus = 'loadmore';
						} else {

							this.loadingStatus = 'nomore';
						}
					}

					if (!uni.$u.test.isEmpty(res)) {
						this.vehicleData = this.vehicleData.concat(res);
					}


				})
			},

			clickloadmore() {
				this.getData();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},


			itemClick(item) {
				// getApp().globalData.vehicleData = item;

				if (item.carId) {
					uni.navigateTo({
						url: './mycardetail?carId=' + item.carId
					})
				}

			}

		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.getData();
		},

		onReachBottom() {
			console.log('到底了');

			this.getData();
			this.showloading = true;
			this.loadingStatus = 'loading';
		}

	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		justify-content: space-between;
		margin: 20upx;
		align-items: center;

		.title-left {
			color: $white;
			font-size: 24upx;
			background-color: $green12;
			padding: 8upx 20upx;
			border-radius: 90upx;

		}

		.title-right {
			color: $rede9;
			font-size: 28upx;
			background-color: $yellowffc;
			padding: 8upx 20upx;
			border-radius: 90upx;
		}
	}

	.grid-title {
		color: $black33;
		font-weight: bold;
		font-size: 28upx;
		margin-top: 10upx;
	}

	.grid-value {
		color: $graya7;
		font-size: 24upx;
		margin: 6upx 0 10upx;
	}
</style>
